import React, { useEffect ,useState,Key} from "react";
import { Row, Col, Card, Tree, Tag, Pagination, Table,Button } from "antd";
import { Navigate, useNavigate, useParams } from "react-router-dom";

//引入请求树形图api
import {hosDepartmentRequest,hosScheduleRuleRequest,getDoctorSchedulRequest} from '@api/hospital/hospitalList'

//引入请求返回值类型
import type {hosDepartmentReturnType,bookingScheduleList,getDoctorSchedulReturnType}  from '@api/hospital/model/hospitalListType'
import { use } from "i18next";

export default function HospitalSchedule() {

     const navigate = useNavigate()
    //拿到传递过来的hoscode
    const {hoscode} = useParams()
    // console.log(hoscode);
    //保存请求过来的树形图数据
    const [treeData,setTreeData] = useState<hosDepartmentReturnType>([])
    // console.log(treeData,'111');
    
    //保存传参数据的状态
    const [page,setPage] = useState(1)
    const [limit,setLimit] =useState(5)
    const [depcode,setDepcode] =useState('200040878')
    // console.log(depcode,'111');
    
    const [total,setTotal] = useState(0)

    //保存获取的医院规则返回值返回值
    const[hosScheduleList,setHosScheduleList] =useState<bookingScheduleList>([])
    // console.log(hosScheduleList);

    //定义一个workdata
    const [workDates,setWorkDates] = useState('2022-04-28')

    //接收请求到的医院排班数据
    const [doctorSchedul,setDoctorSchedul] = useState<getDoctorSchedulReturnType>([])
    console.log(doctorSchedul,'1212121');
    

    //进入页面初始化，请求树形图数据
    useEffect(()=>{
        const getDepartment = async ()=>{
            const re = await hosDepartmentRequest(hoscode as string)
            // console.log(re,'re');
            setTreeData(re)
        }
        getDepartment();
    },[])

  //进入页面请求医院排班规则
  useEffect(()=>{
    const getHosScheduleRule= async()=>{
        const re = await hosScheduleRuleRequest({
            page:page,
            limit:limit,
            hoscode:hoscode as string,
            depcode:depcode
        })
        // console.log(re,'reaaaaa');
        setHosScheduleList(re.bookingScheduleList)
        setTotal(re.total)
    }
    getHosScheduleRule()
},[page,limit,depcode,workDates])

//进入页面请求医生排班列表
 useEffect(()=>{
  const getDoctorSchedul = async()=>{
    const re = await getDoctorSchedulRequest({
      hoscode:hoscode as string,
      depcode:depcode,
      workDate:workDates
    })
    
    setDoctorSchedul(re)
  }
  getDoctorSchedul()
 },[depcode,workDates])

    //点击分页切换
    const changePageHandle  =(page:number,limit:number)=>{
        setPage(page)
        setLimit(limit)
    }


  //点击科室获取depcode
  const threedianji = (b:Key[])=>{
    // console.log(b); 拿到的是一个字符串的数组
    setDepcode(b[0] as string)
  }

 const getWorkDate=(workDate:string)=>{
   return ()=>{
    setWorkDates(workDate)
   }
 }
  //table结构
  const columns = [
    {
      title: "序号",
      render(_: any, __: any, index: number) {
        return index + 1;
      },
    },
    {
      title: "职称",
      dataIndex: "title",
    },
    {
      title: "号源时间",
      dataIndex: "workDate",
    },
    {
      title: "可预约数",
      dataIndex: "reservedNumber",
    },
    {
      title: "挂号费用",
      dataIndex: "amount",
    },
    {
      title: "擅长技能",
      dataIndex: "skill",
    },
  ];
  const treeStyle = {
    border: "1px solid #000",
    height: "480px",
    overflow: "auto",
  };
  return (
    <Card>
      <p>选择:北京协和医院/多发性硬化专科门诊/2022-04-08</p>
      <Row gutter={20}>
        <Col span={5}>
          <div>
            <Tree 
            //antd目前没有很好的解决treeData修改字段后的类型控制,临时解决方案是断言为[]
            //直接把获取数据保存的名字改为treeData，在这里使用
            treeData={treeData as []} 
            //样式
            style={treeStyle} 
            fieldNames={{ title: "depname", key: "depcode" }}
            //控制表单默认展开
            expandedKeys={["a4e171f4cf9b6816acdfb9ae62c414d7"]}
            onSelect={threedianji}
            />
          </div>
        </Col>
        <Col span={19}>
          <div style={{ marginBottom: "20px",cursor:"pointer" }} >
            {
                hosScheduleList.map(item=>{
                    return <Tag key={item.workDate} onClick={getWorkDate(item.workDate)}>
                    <p >{item.workDate}</p>
                    <p>{item.docCount}/{item.availableNumber}</p>
                  </Tag>
                })
            }
          </div>
          <Pagination 
          current={page}
          pageSize={limit}
          total={total}
          onChange={changePageHandle}
          />

          <Table 
          columns={columns} 
          style={{ marginTop: "20px" }}
          //渲染数据
          dataSource={doctorSchedul}
          //让缺少的Key为id
          rowKey={"id"}
          //加边框
          bordered
          //取消分页
          pagination={false}
          ></Table>

          <Button onClick={()=>{
            navigate(-1)
          }}   style={{marginTop:"20px"}}>返回</Button>
        </Col>
      </Row>
    </Card>
  );
}
